<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>

</html>

<script>
    //基本用法
    // ES6允许使用“箭头”（=>）定义函数
    // 第一种：函数声明
    function fn1(x, y) {
        return x + y
    }
    console.log(fn1(1, 2))
    //第二种：赋值函数
    var fn2 = function (x, y) {
        return x + y
    }
    console.log(fn2(1, 2))
    //第三种：箭头函数
    var fn3 = (x, y) => x + y
    console.log(fn3(1, 2))

    //如果箭头函数不需要参数，就是用一个圆括号代表参数部分
    var fn4 = x => x + 1 //一个参数，圆括号可以省略
    console.log(fn4(1))

    var fn5 = () => 1 //没有参数，圆括号不能省略
    console.log(fn5())

    var fn6 = (x, y) => x + y //两个或更多参数，圆括号不能省略


    //如果箭头函数的代码块部分多于一条语句，就要使用大括号将它们括起来，并且使用return语句返回值，否则，箭头函数会返回undefined
    //常规函数 
    var fn7 = function (x, y) {
        var z = 10;
        return x + y + z;
    }
    //箭头函数
    var fn8 = (x, y) => {
        var z = 10;
        return x + y + z;
    }

    //由于大括号被解释为代码块，所以如果箭头函数直接返回一个对象，必须在对象外面加上括号，否则会报错
    //常规函数
    var fn9 = function () {
        return {
            name: 'Yang',
            age: 20
        }
    }
    //箭头函数
    var fn10 = () => ({ name: 'Yang', age: 20 })

    //箭头函数的用处是简化回调函数（匿名函数）
    //常规函数
    var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
    arr.map(function (Elemtent, index) {
        console.log(Elemtent)
    })
    //箭头函数
    arr.map((Element, index) => {
        console.log(Element)
    })


    // 使用注意点
    //对于普通函数来说，内部的this指向函数运行时所在的对象，但是这一点对箭头函数不成立。
    //它没有自己的this对象,内部this就是定义时上层作用域中的this
    //常规函数this指向写法
    var name = '小杨'
    var user = {
        name: 'YANG',
        getName() {
            var that = this //通过that保存this指向的方法
            setTimeout(function () {
                console.log(that.name) //YANG
            }, 2000)
        }
    }
    user.getName()

    //箭头函数this指向写法
    var users = {
        name: 'Yang',
        getName() {
            setTimeout(() => {
                console.log(this.name) //Yang
            }, 2000)
        }
    }
    users.getName()

    //温馨提示：箭头函数里面根本没有自己的this,而是引用外层的this
</script>